<template>
<div class="browser">
    <div id="myChart2" class="myChart2" :style="{width:wEc+'px',height:hEc+'px'}"></div>
</div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            screenWidth: 0,
            wEc: 600,
            hEc: 250
        }
    },
    computed: {

    },
    methods: {
        setStyles() {
            // let w = this.screenWidth - 256 - 18 * 2
            // this.wEc = w
            // this.hEc = w > 1400 ? 400 : 300
            setTimeout(() => {
                this.echartsInit()
            }, 0)
        },
        echartsInit() {
            // 找到容器
            let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
            // 开始渲染
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: [
                        'CHROME',
                        'CHROME8',
                        'CHROME_MOBILE',
                        'BOT',
                        'MOBILE_SAFARI',
                        'IE11',
                        'EDGE',
                        'APPLE_WEB_KIT',
                        'SAFARI',
                        '其他'
                    ]
                },
                series: [{
                    name: '浏览器',
                    type: 'pie',
                    radius: '55%',
                    center: ['70%', '40%'],
                    data: [

                        {
                            value: 3784,
                            name: 'CHROME'
                        },

                        {
                            value: 2751,
                            name: 'CHROME8'
                        },

                        {
                            value: 1137,
                            name: 'CHROME_MOBILE'
                        },

                        {
                            value: 1008,
                            name: 'BOT'
                        },

                        {
                            value: 621,
                            name: 'MOBILE_SAFARI'
                        },

                        {
                            value: 323,
                            name: 'IE11'
                        },

                        {
                            value: 276,
                            name: 'EDGE'
                        },

                        {
                            value: 200,
                            name: 'APPLE_WEB_KIT'
                        },

                        {
                            value: 186,
                            name: 'SAFARI'
                        },

                        {
                            value: 490,
                            name: '其他'
                        }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
            myChart2.setOption(option)
        },
    },
    mounted() {
        this.setStyles()
    }
}
</script>

<style lang="less" scoped>
.browser {
    background-color: #fff;
    margin-top:20px;
    padding-top:10px;
}

.myChart2 {
    width: 600px;
    height: 250px;
    margin-left: auto;
    margin-right: auto;
}
</style>
